<template>
  <div class="action-container">
    <el-button type="primary" @click="handleAdd" icon="Plus">新增</el-button>
  </div>
  <div class="container">
    <el-table :data="tableData" border class="table">
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="remark" label="角色描述"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button
            @click="handleEdit(scope.$index, scope.row)"
            icon="Edit"
            circle
          />
          <el-button
            @click="handleDelete(scope.$index, scope.row)"
            icon="Delete"
            circle
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="query.pageIndex"
        :page-size="query.pageSize"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>

  <!-- 编辑弹出框 -->
  <el-dialog :title="title" v-model="editVisible" center @close="cancelEdit">
    <el-form
      :model="row"
      :rules="rules"
      ref="form"
      label-width="100px"
      size="small"
    >
      <el-form-item prop="roleName" label="角色名称">
        <el-input
          v-model="row.roleName"
          :disabled="title === '编辑角色'"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="menuIds" label="菜单">
        <el-cascader
          v-model="row.menuIds"
          :options="menuOptions"
          :props="{
            multiple: true,
            value: 'id',
            label: 'menuName',
            emitPath: false,
          }"
          collapse-tags
          clearable
          placeholder="请选择菜单"
        ></el-cascader>
      </el-form-item>
      <el-form-item prop="remark" label="描述">
        <el-input v-model="row.remark" placeholder="描述"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { addRole, deleteRole, listRole, updateRole } from "@/api/role";
import { listMenu } from "@/api/menu";
import { reactive, ref } from "vue";

const rules = {
  roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
};

const query = reactive({
  pageNum: 1,
  pageSize: 10,
});

const tableData = ref([]);
const pageTotal = ref(0);
const title = ref("");
const editVisible = ref(false);
const row = reactive({});
const form = ref(null);
const menuOptions = ref([]);

// 获取角色列表
const queryRole = () => {
  listRole(query).then((res) => {
    tableData.value = res.data.rows;
    pageTotal.value = res.data.total;
  });
};

// 获取菜单列表
const queryMenu = () => {
  listMenu(query).then((res) => {
    menuOptions.value = res.data.rows;
  });
};

// 查询操作
const handleSearch = () => {
  query.pageIndex = 1;
  queryRole();
};

// 分页导航
const handlePageChange = (val) => {
  query.pageIndex = val;
  queryRole();
};

// 删除操作
const handleDelete = (index, row) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(() => {
    deleteRole(row.id).then(() => {
      ElMessage.success("删除成功");
      queryRole();
    });
  });
};

// 显示添加窗口
const handleAdd = () => {
  title.value = "添加角色";
  editVisible.value = true;
};

// 显示修改窗口
const handleEdit = (index, row) => {
  this.row = row;
  title.value = "编辑角色";
  editVisible.value = true;
};

// 取消修改
const cancelEdit = () => {
  editVisible.value = false;
  queryRole();
};

// 保存修改
const saveEdit = () => {
  form.value.validate((valid) => {
    if (valid) {
      if (title.value === "编辑角色") {
        updateRole(row).then(() => {
          ElMessage.success("更新成功");
          editVisible.value = false;
          queryRole();
        });
      } else {
        addRole(row).then(() => {
          ElMessage.success("添加成功");
          editVisible.value = false;
          queryRole();
        });
      }
    }
  });
};

queryRole();
queryMenu();
</script>
